<template>
  <view class="root">
    <view class="top">
      <map id="myMap" style="width: 100%; height: 66vh;position: relative;" :latitude="latitude" :longitude="longitude"
        :scale="mapscale" :markers="markers" :enable-3D="true" :enable-satellite='weiXing' :show-location="true"
        @tap="mapTap" :polyline="polyline" :polygons="polygons">
      </map>
    </view>
    <view class="bottom">
      <view class="info-top">
        <view class="type">
          {{
            details.name ? `${details.name}离开安全区域` : '暂无'
          }}
        </view>
        <view class="address">
          {{
            details.eventAddress
          }}
        </view>
        <view class="time">
          {{
            details.eventTime
          }}
        </view>
      </view>
      <u-button text="处置反馈" @click="show = true" :custom-style="ColorButton"></u-button>
    </view>
    <u-modal @cancel="handleCancel" @confirm="handleConfirm" :show="show" title="处置反馈" showCancelButton
      confirmText="提交">
      <u-textarea :height="193" class="slot-content" v-model="value" :placeholderStyle="placeholderStyle"
        placeholder="请简要描述报警处置情况" :maxlength="50" count @input="handleInputValue" ref="textareaRef"
        :formatter="formatter"></u-textarea>
    </u-modal>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    deviceeventDetails
  } from '../../api/api'
  import {
    postAction
  } from '../../utils/request'
  import {
    ColorButton,
    Toast,
    alarmType,
    getOptionsParams,
    isLoading,
    navBack
  } from '@/utils/util.js'

  export default {
    data() {
      return {
        $baseImgUrl: this.$baseImgUrl,
        ColorButton,
        latitude: 0,
        longitude: 0,
        mapscale: 14,
        markers: [],
        weiXing: false,

        controls: [],
        polygons: [],
        polyline: [],
        show: false,
        value: '',
        placeholderStyle: {
          'font-weight': 400,
          'font-size': '28rpx',
          color: '#AAAAAA'
        },
        routerParams: {},
        details: {},
        alarmType: alarmType,
      }
    },
    onReady() {
      this.$refs.textareaRef.setFormatter(this.formatter)
    },
    onLoad(options) {
      this.routerParams = getOptionsParams(options)
      this.getDetail()
    },
    methods: {
      onMapLoaded(points, personLocation) {
        this.mapContext = uni.createMapContext('myMap', this);
        // 在地图加载完成后，将地图的中心点设置为标记的位置
        this.drawRectangle(points, personLocation);
        this.mapContext.includePoints({
          points: [...points, {
            latitude: personLocation.latitude,
            longitude: personLocation.longitude,
          }],
          padding: [50, 50, 50, 50]
        });
      },
      drawRectangle(points, personLocation) {
        const paths = points.map(point => {
          const {
            longitude,
            latitude
          } = point
          // 添加 marker 点
          this.markers.push({
            id: this.markers.length + 1,
            latitude,
            longitude,
            iconPath: '/static/icons/area-icon.png',
            width: 15,
            height: 27,
          })

          return {
            longitude,
            latitude
          }
        });


        // 添加人 点
        this.markers.push({
          id: this.markers.length + 1,
          latitude: personLocation.latitude,
          longitude: personLocation.longitude,
          iconPath: this.$baseImgUrl + 'person-01.png',
          width: 45,
          height: 48,
        })

        this.polygons = [{
          points: paths,
          strokeWidth: 1,
          strokeColor: '#FC6F2E',
          fillColor: '#F98E3047',
        }];

      },
      mapTap(e) {
        console.log(e)
      },
      handleConfirm() {
        let value = this.value.trim()
        if (!value) {
          Toast('描述不能为空！')
          return
        }
        postAction('/mini/wb/deviceevent/handle', {
            id: this.routerParams.id,
            handlingSituation: value
          })
          .then((res) => {
            setTimeout(() => {
              this.value = ''
              this.show = false
              uni.$emit('addOk')
              navBack()
            }, 300)
          })

      },
      handleCancel() {
        this.value = ''
        this.show = false
      },
      getDetail() {
        isLoading(true)
        deviceeventDetails({
            id: this.routerParams.id
          })
          .then((res) => {
            this.details = res.result
            const {
              wbSetFanceBean
            } = res.result
            let points = []
            if (wbSetFanceBean) {
              points = [{
                  longitude: wbSetFanceBean.pos1Lon,
                  latitude: wbSetFanceBean.pos1Lat
                },
                {
                  longitude: wbSetFanceBean.pos2Lon,
                  latitude: wbSetFanceBean.pos2Lat
                },
                {
                  longitude: wbSetFanceBean.pos3Lon,
                  latitude: wbSetFanceBean.pos3Lat
                },
                {
                  longitude: wbSetFanceBean.pos4Lon,
                  latitude: wbSetFanceBean.pos4Lat
                }
              ]
              const personLocation = {
                longitude: this.details.lon,
                latitude: this.details.lat
              }
              // 拿到点之后渲染
              this.onMapLoaded(points, personLocation)
            }
          })
          .finally((res) => {
            isLoading(false)
          })
      },
      handleInputValue() {},
      formatter(value) {
        if (value.length >= 50) {
          return value.substr(0, 50)
        } else {
          return value
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .root {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .top {
      flex: 1;
    }

    .bottom {
      height: 34vh;
      padding: 50rpx 50rpx 30rpx 50rpx;
      display: flex;
      flex-direction: column;

      .info-top {
        flex: 1;
      }

      .type {
        font-weight: bold;
        font-size: 30rpx;
        color: #000000;
      }

      .address {
        font-weight: 500;
        font-size: 30rpx;
        color: #000000;
        margin-top: 24rpx;
        margin-bottom: 22rpx;
      }

      .time {
        font-weight: 400;
        font-size: 28rpx;
        color: #AAAAAA;
        margin-bottom: 50rpx;
      }

      /deep/.u-button__text {
        font-weight: bold;
        font-size: 32rpx;
        color: #FAFAFA;
      }
    }
  }
</style>